<template>
  <div id="app" class="father">
    <!--头部订单详情-->
    <el-form :inline="true" :model="markOrder" class="demo-form-inline formed">
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple-dark markOrder">
            <el-form-item
              v-model="markOrder.orderType"
              label="代领检字服务"
            ></el-form-item>
          </div>
        </el-col>
      </el-row>
      <!--内容-->
      <div class="grid-content bg-purple">
        <!--左表单-->
        <el-row :gutter="20">
          <!--右表单-->
          <el-col :span="12" class="menued">
            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline formed"
              :label-position="labelposition"
              label-width="110px"
            >
              <el-form-item :required="true" label="登记人:">
                <el-input v-model="formInline.safeorderRegister"></el-input>
              </el-form-item>
              <el-form-item :required="true" label="联系人:">
                <el-input v-model="formInline.safeorderUser"></el-input>
              </el-form-item>
              <el-form-item :required="true" label="联系电话:">
                <el-input v-model="formInline.safeorderUserphone"></el-input>
              </el-form-item>
              <!--            <el-form-item :required=true label="接车时间:">-->
              <!--              <el-input v-model="formInline.safeorderGotime" ></el-input>-->
              <!--            </el-form-item>-->
              <el-form-item :required="true" label="车牌号:">
                <el-input v-model="formInline.safeorderCarnumber"></el-input>
              </el-form-item>
              <!--            <el-form-item :required=true label="发动机号:">-->
              <!--              <el-input v-model="formInline.safeorderEngineno" ></el-input>-->
              <!--            </el-form-item>-->

              <el-form-item :required="true" label="接车地址:">
                <el-input v-model="formInline.safeorderGoaddress"></el-input>
              </el-form-item>
              <el-form-item :required="true" label="还车地点:">
                <el-input v-model="formInline.safeorderBackaddress"></el-input>
              </el-form-item>
              <!--            <el-form-item :required=true size="large" label="地图行程">-->
              <!--              <el-button type="primary" >接车地图</el-button>-->
              <!--              <el-button type="primary">还车地图</el-button>-->
              <!--            </el-form-item>-->
              <el-form-item :required="true" label="客户备注:">
                <el-input v-model="formInline.safeorderUsernote"></el-input>
              </el-form-item>
              <el-form
                :inline="true"
                :model="formInline"
                class="demo-form-inline"
                :label-position="labelposition"
                label-width="110px"
              >
                <el-form-item :required="true" label="预计还车时间:">
                  <el-input v-model="formInline.safeorderSpendtime"></el-input>
                </el-form-item>
                <el-form-item :required="true" label="拍照内容:">
                  <el-input
                    v-model="formInline.safeorderUserimage"
                    placeholder="行驶证，交强险保单（并上传海涛微信）收取：行驶证"
                  ></el-input>
                </el-form-item>
                <div class="grid-content bg-purple">
                  <el-form-item :required="true" label="上传证件图片:">
                    <!--图片附件-->
                    <el-upload
                      class="upload-demo"
                      accept="image/jpeg,image/jpg,image/png"
                      name="file"
                      ref="img"
                      :action="imgUpload"
                      :file-list="fileListUser"
                      :on-success="handleSuccess"
                      list-type="picture-card"
                    >
                      <i slot="default" class="el-icon-plus"></i>
                      <div slot="file" slot-scope="{ file }">
                        <img
                          class="el-upload-list__item-thumbnail"
                          :src="file.url"
                          alt=""
                        />
                        <span class="el-upload-list__item-actions">
                          <span
                            class="el-upload-list__item-preview"
                            @click="handlePictureCardPreview"
                          >
                            <i class="el-icon-zoom-in"></i>
                          </span>
                        </span>
                      </div>
                      <div slot="tip" class="el-upload__tip">
                        只能上传jpg/png文件，且不超过500kb
                      </div>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                      <img width="100%" :src="imageUrl" alt="" />
                    </el-dialog>
                  </el-form-item>
                </div>
              </el-form>
            </el-form>
          </el-col>
          <el-col :span="12" class="menued">
            <el-form
              :inline="true"
              class="demo-form-inline formed"
              :label-position="labelposition"
              label-width="110px"
            >
              <div class="grid-content bg-purple">
                <el-form-item label="请选择领标司机:">
                  <!--取证司机区域下拉-->
                  <el-select
                    v-model="formInline.getarea"
                    placeholder="选择区域"
                    @change="getdriver"
                  >
                    <el-option
                      v-for="(item, index) in area"
                      :label="item.driver_area"
                      :value="item.driver_area"
                      :key="index"
                    ></el-option>
                  </el-select>
                  <!--取证司机名字下拉-->
                  <el-select
                    v-model="formInline.getdriverName"
                    placeholder="取证司机"
                  >
                    <el-option
                      v-for="(item, index) in getdrivers"
                      :label="item.driver_name"
                      :value="item.driver_name"
                      :key="index"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <!--            <div class="grid-content bg-purple">-->
              <!--            <el-form-item  :required=true label="还证司机:">-->
              <!--              &lt;!&ndash;还证司机区域下拉&ndash;&gt;-->
              <!--              <el-select v-model="formInline.send"  placeholder="选择区域" @change="senddriver">-->
              <!--                <el-option v-for="(item,index) in sendarea" :label="item.driver_area" :key="index" :value=item.driver_area></el-option>-->
              <!--              </el-select>-->
              <!--              &lt;!&ndash;还证司机名字下拉&ndash;&gt;-->
              <!--              <el-select v-model="formInline.senddriverName" placeholder="还证司机">-->
              <!--                <el-option v-for="(item,index) in senddrives"  :label=item.driver_name :value=item.driver_name :key="index"></el-option>-->
              <!--              </el-select>-->
              <!--            </el-form-item>-->
              <!--            </div>-->
              <div class="grid-content bg-purple">
                <el-form-item :required="true" label="派工单位:">
                  <el-select
                    v-model="formInline.safeorderGocompany"
                    placeholder="派工单位"
                  >
                    <el-option label="后台录入" value="1"></el-option>
                    <el-option label="用户录入" value="0"></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <!--            <div class="grid-content bg-purple">-->
              <!--            <el-form-item :required=true label="订单状态:">-->
              <!--              <el-select v-model="formInline.orderStateNamec" placeholder="选择状态" @change="getOrderValue">-->
              <!--                <el-option v-for="(item,orderState_id) in orderStateName"-->
              <!--                           :label=item.orderState_name-->
              <!--                           :value=item.orderState_id :key="orderState_id"></el-option>-->
              <!--              </el-select>-->
              <!--            </el-form-item>-->
              <!--            </div>-->
              <div class="grid-content bg-purple">
                <el-form-item :required="true" label="检测场:">
                  <el-select v-model="formInline.area" placeholder="选择区域">
                    <el-option
                      v-for="(item, index) in area"
                      :label="item.driver_area"
                      :value="item.driver_area"
                      :key="index"
                    ></el-option>
                  </el-select>
                  <el-select
                    v-model="formInline.safeorderCheckshop"
                    placeholder="请选择检测场"
                  >
                    <el-option label="成华区" value="chenghuaqu"></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="grid-content bg-purple">
                <el-form-item :required="true" label="是否需要赔款:">
                  <el-radio-group
                    class="peikuan"
                    v-model="formInline.safeorderNeedmoney"
                  >
                    <el-radio label="是"></el-radio>
                  </el-radio-group>
                </el-form-item>
              </div>
              <div class="grid-content bg-purple">
                <el-form-item :required="true" label="是否发短信:">
                  <el-radio-group v-model="formInline.safeorderSendmessage">
                    <el-radio label="是"></el-radio>
                    <el-radio label="否"></el-radio>
                  </el-radio-group>
                </el-form-item>
              </div>
              <!--            <div class="grid-content bg-purple">-->
              <!--            <el-form-item :required=true label="特定事项:">-->
              <!--              <el-input v-model="formInline.safeorderNotice"></el-input>-->
              <!--            </el-form-item>-->
              <!--            </div>-->
              <div class="grid-content bg-purple">
                <el-form-item :required="true" label="短信内容:">
                  <el-input
                    id="userMsg"
                    type="textarea"
                    resize="none"
                    :rows="8"
                    v-model="formInline.safeorderSms"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="grid-content bg-purple">
                <el-form-item :required="true" size="large" class="textMargin">
                  <el-button type="primary" @click="textMsg"
                    >生成短信</el-button
                  >
                  <el-button type="primary" @click="sendMsg"
                    >发送给客户</el-button
                  >
                </el-form-item>
              </div>
              <div class="grid-content bg-purple">
                <el-form-item
                  :required="true"
                  label="短信内容:"
                  class="driverMsg"
                >
                  <el-input
                    id="driverMsg"
                    type="textarea"
                    resize="none"
                    :rows="8"
                    v-model="formInline.safeorderSmsdriver"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="grid-content bg-purple">
                <el-form-item :required="true" size="large" class="textMargin">
                  <el-button type="primary" @click="driverMsg"
                    >生成短信</el-button
                  >
                  <el-button type="primary" @click="sendDriverMsg"
                    >发送给客户</el-button
                  >
                </el-form-item>
              </div>
            </el-form>
          </el-col>
        </el-row>
        <div class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="addmark">保 存</el-button>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgUpload: this.$api.orderManage.imgUpload,
      //formInline表单的各个值名
      labelposition: "right",
      markOrder: {
        orderType: "代领检字服务"
      },
      fileListUser: [],
      dialogVisible: false,
      imageUrl: "",
      saveImg: "",
      safeorderGocompany: 0,
      formInline: {
        getarea: "",
        send: "",
        safeorderNotice: "",
        safeorderGotime: "",
        safeorderCarnumber: "",
        safeorderEngineno: "",
        safeorderUser: "",
        safeorderUserphone: "",
        safeorderRegister: "",
        safeorderGoaddress: "",
        safeorderBackaddress: "",
        safeorderUsernote: "",
        safeorderSpendtime: "",
        safeorderUserimage: "",
        safeorderCheckshop: "",
        safeorderNeedmoney: "",
        safeorderSendmessage: "",
        safeorderSms: "",
        safeorderSmsdriver: "",
        getdriverName: "",
        senddriverName: "",
        orderStateNamec: ""
      },
      //取证区域信息
      area: [],
      //还证区域
      sendarea: [],
      //检测场区域
      testarea: [],
      //根据区域获取的司机
      getdrivers: [],
      senddrives: [],
      //获取订单状态
      orderStateName: []
    };
  },
  methods: {
    //当点击保存按钮时 触发的函数事件
    //子传父
    delData() {
      this.$emit("getchidval");
    },
    addmark: function() {
      this.$emit("getchidval");
      this.$axios
        .post(
          this.$api.orderManage.add, //用post链接后台对应的接口
          JSON.stringify({
            safeorderType: this.markOrder.orderType,
            safeorderGocompany: this.formInline.safeorderGocompany,
            safeorderNotice: this.formInline.safeorderNotice,
            safeorderGotime: this.formInline.safeorderGotime,
            safeorderCarnumber: this.formInline.safeorderCarnumber,
            safeorderEngineno: this.formInline.safeorderEngineno,
            safeorderUser: this.formInline.safeorderUser,
            safeorderUserphone: this.formInline.safeorderUserphone,
            safeorderRegister: this.formInline.safeorderRegister,
            safeorderGoaddress: this.formInline.safeorderGoaddress,
            safeorderBackaddress: this.formInline.safeorderBackaddress,
            safeorderUsernote: this.formInline.safeorderUsernote,
            safeorderSpendtime: this.formInline.safeorderSpendtime,
            safeorderUserimage: this.formInline.safeorderUserimage,
            driver_area: this.formInline.driver_area,
            safeorderBackdriver: this.formInline.safeorderBackdriver,
            safeorderCheckshop: this.formInline.safeorderCheckshop,
            safeorderNeedmoney: this.formInline.safeorderNeedmoney,
            safeorderSendmessage: this.formInline.safeorderSendmessage,
            safeorderSms: this.formInline.safeorderSms,
            safeorderSmsdriver: this.formInline.safeorderSmsdriver,
            safeorderStateid: this.orderState,
            safeorderImageuri: this.saveImg
          }), //将数据传给对应的数据库的值名
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(response => {
          console.log(response); //打印响应
          var result = response.data; //响应出来的数据复制给结果
          if (response.status === 200) {
            //当响应状态等于200时
            this.$alert("保存成功");
          } else {
            this.$alert(result.message);
          }
        })
        .catch(err => {
          this.$alert("请求出错");
          console.log(err);
        });
    },
    cancel() {
      //当点击取消按钮时 触发的函数事件
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
          this.formInline.safeorderGocompany = "";
          this.formInline.safeorderGocompany = "";
          this.formInline.safeorderNotice = "";
          this.formInline.safeorderGotime = "";
          this.formInline.safeorderCarnumber = "";
          this.formInline.safeorderEngineno = "";
          this.formInline.safeorderUser = "";
          this.formInline.safeorderUserphone = "";
          this.formInline.safeorderRegister = "";
          this.formInline.safeorderGoaddress = "";
          this.formInline.safeorderBackaddress = "";
          this.formInline.safeorderUsernote = "";
          this.formInline.safeorderSpendtime = "";
          this.formInline.safeorderUserimage = "";
          this.formInline.safeorderBackdriver = "";
          this.formInline.safeorderCheckshop = "";
          this.formInline.safeorderNeedmoney = "";
          this.formInline.safeorderSendmessage = "";
          this.formInline.safeorderSms = "";
          this.formInline.safeorderSmsdriver = "";
          this.formInline.orderStateNamec = "";
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //获取取证司机区域
    getGetarea() {
      this.$axios
        .get(this.$api.orderManage.driversarea, {
          headers: {
            "Content-Type": "application/json"
          }
        })
        .then(response => {
          if (response.data.code === "200") {
            console.log(response.data.data);
            this.area = response.data.data;
            this.sendarea = response.data.data;
          }
        })
        .catch(err => {
          this.$alert("数据异常");
          console.log(err);
        });
    },
    //获取
    //根据区域获取司机信息
    getdriver(driver) {
      //console.log(driver)
      this.$axios
        .post(this.$api.orderManage.drivers, { area: driver })
        .then(response => {
          console.log(response);
          if (response.data.code === "200") {
            this.getdrivers = response.data.data;
            //alert(111)
            // console.log('this.senddrives = ',this.senddrives)
          }
        })
        .catch(err => {
          this.$alert("数据异常");
          console.log(err);
        });
    },
    senddriver(val) {
      this.$axios
        .post(this.$api.orderManage.driversarea, { area: val })
        .then(response => {
          console.log(response);
          if (response.data.code === "200") {
            this.senddrives = response.data.data;
            console.log(this.senddrives);
          }
        })
        .catch(err => {
          this.$alert("数据异常");
          console.log(err);
        });
    },
    //获取订单状态信息
    orderStateNameS() {
      this.$axios
        .post(this.$api.orderManage.orderstate)
        .then(response => {
          console.log("获取", response);
          if (response.data.code === "200") {
            this.orderStateName = response.data.data;
            console.log("this.orderStateName = ", this.orderStateName);
          }
        })
        .catch(err => {
          this.$alert("数据异常");
          console.log(err);
        });
    },
    //获取选定值后返回数据库
    getOrderValue(val) {
      this.orderState = val;
    },
    //用户短信生成按钮
    textMsg() {
      this.$message({
        message: "已成功生成短信",
        type: "success"
      });
    },
    //用户短信发送成功
    sendMsg() {
      document.getElementById("userMsg").value = "";
      this.$message({
        message: "已成功发送给用户",
        type: "success"
      });
    },
    //司机短信生成
    driverMsg() {
      this.$message({
        message: "已成功生成短信",
        type: "success"
      });
    },
    //司机短信发送
    sendDriverMsg() {
      document.getElementById("driverMsg").value = "";
      this.$message({
        message: "已成功发送给司机",
        type: "success"
      });
    },
    //用户图片上传部分的方法
    handleSuccess: function(response) {
      console.log("response = ", response);
      this.saveImg = response.fileName;
      this.imageUrl = response.data;
      console.log("this.imageUrl = ", this.imageUrl);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  },
  created() {
    this.getGetarea();
    this.orderStateNameS();
  }
};
</script>

<style scoped>
.markOrder {
  border-bottom: 1px solid grey;
  padding: 10px 0;
  text-align: center;
  margin-bottom: 20px;
}
.el-select {
  width: 100px;
  margin-right: 10px;
}
.el-input {
  width: 230px;
}
.menued {
  width: 430px;
  margin-left: 30px;
}
.formed {
  text-align: left;
}
#title {
  text-align: left;
}
.dialog-footer {
  float: right;
}
.father {
  overflow: hidden;
}
.driverMsg {
  margin-top: 20px;
}
.textMargin {
  margin-left: 70px;
}
</style>
